<template>
  <div class="tabs-container">
    <div id="col_resize" class="col_resize" :class="{ mousedown: mouseDownScreenY }"
      :style="{ top: mouseDownScreenY + 'px' }" @mousedown="mouseDown"></div>

    <div class="tabs-header">
      <div class="tabs-info">
        <!-- 拖动tabHeight高度 -->
        <!-- <handleTabHeight @heigthChange="handleHeightChange" /> -->

        <div>总车数:{{ totalInfo.all }}</div>
        <div><span class="status online"></span>在线({{ totalInfo.online }})</div>
        <div><span class="status stop"></span>熄火({{ totalInfo.stall }})</div>
        <div><span class="status offline"></span>离线({{ totalInfo.offline }})</div>
        <div><span class="status waring"></span>报警({{ totalInfo.alarm }})</div>
        <div><span class="status outage"></span>停运({{ totalInfo.outage }})</div>
        <div>车辆在线率: {{ totalInfo.onlineRate ? totalInfo.onlineRate.toFixed(2) : 0 }}%(不含停运)</div>
      </div>
      <div class="tabs-option">
        <div @click="toggleTabsTableHeight">
          <img class="option-icon" :class="{ 'icon-down': isOpenTable }" src="@/assets/images/safety/arrow_up.png">
        </div>
      </div>
    </div>

    <div class="tabs-content" :style="{ height: contentHeight + 'px' }">
      <keep-alive>
        <component :is="currentTab"></component>
      </keep-alive>
    </div>

    <div class="tabs-footer">
      <div class="tab-option">
        <div class="tab" :class="{ active: tabActive == 'times' }" @click="switchTab('times')">
          <div class="font">实时数据</div>
        </div>
        <div class="tab" :class="{ active: tabActive == 'offline' }" @click="switchTab('offline')">
          <div class="font">离线车辆</div>
        </div>
        <div class="tab" :class="{ active: tabActive == 'outage' }" @click="switchTab('outage')">
          <div class="font">停运车辆</div>
        </div>
        <div class="tab" v-if="poiShow" :class="{ active: tabActive == 'poi' }" @click="switchTab('poi')">
          <div class="font">POI管理</div>
        </div>
        <!-- <div class="tab" :class="{ active: tabActive == 'times' }">
          <div class="font">运营查岗</div>
        </div>
        <div class="tab" :class="{ active: tabActive == 'times' }">
          <div class="font">北斗报警</div>
        </div>
        <div class="tab" :class="{ active: tabActive == 'times' }">
          <div class="font">主动安全报警</div>
        </div>
        <div class="tab" :class="{ active: tabActive == 'times' }">
          <div class="font">硬件报警</div>
        </div> -->
      </div>
      <div class="expand-option" @click="toggleVideoWidth" v-show="videoWidth == 0">
        <img src="@/assets/images/safety/retract.png">
      </div>
    </div>
  </div>
</template>

<script setup name="tabsTable">

// import topImg from '@/assets/images/safe/top.png'
// import downImg from '@/assets/images/safe/down.png'

import handleTabHeight from './handleTabHeight.vue';
import Position from '../tables/position.vue';
import OfflineList from '../tables/offlineList.vue';
import OutageRecord from '../tables/outageList.vue';
import Labels from '../tables/labels.vue';
import { throttle } from 'lodash'
import useUserStore from '@/store/modules/user'
import useVehicleStore from '@/store/modules/vehicle'
import useSatetyMapStore from '@/store/modules/safetyMap'

const userStore = useUserStore();
const { loginTime } = storeToRefs(userStore)
const { totalInfo } = storeToRefs(useVehicleStore())
const safeMapStore = useSatetyMapStore();

//显示视频盒框
const videoWidth = computed(() => {
  return safeMapStore.mapVideoListWidth
})
function toggleVideoWidth() {
  safeMapStore.setMapVideoListWidth(290)
}

const props = defineProps({
  model: Object
})

const currentTab = shallowRef(Position)
const tabs = reactive({
  times: shallowRef(Position),
  offline: shallowRef(OfflineList),
  outage: shallowRef(OutageRecord),
  poi: shallowRef(Labels),
})

//tab 操作
const tabActive = ref('');

//tab栏切换
function switchTab(type) {
  tabActive.value = type
  currentTab.value = tabs[type]
  contentHeight.value <= 0 ? toggleTabsTableHeight() : '';
}

//内容操作
const op = ref('down');
const contentHeight = ref(0);
const mouseDownScreenY = ref(0)

//是否打开显示了tabsTable内容tables
const isOpenTable = ref(false);
function toggleTabsTableHeight() {
  isOpenTable.value = !isOpenTable.value;
  contentHeight.value = isOpenTable.value ? 300 : 0
}

// 鼠标按下事件
var scollY = 0;
var endY = 0;

const mouseDown = (event) => {
  document.addEventListener('mousemove', mouseMove)
  scollY = event.clientY
  mouseDownScreenY.value = event.clientY
}
const mouseMove = (event) => {
  endY = event.clientY
  mouseDownScreenY.value = event.clientY
}
// 鼠标释放事件
const mouseUp = () => {
  // 指定元素可改变的最大以及最小宽度
  if (scollY && endY) {
    contentHeight.value = contentHeight.value + (scollY - endY)
  }
  document.removeEventListener('mousemove', mouseMove)
  scollY = endY = 0;
  mouseDownScreenY.value = 0
}
// 鼠标释放节流事件
const handleMoveThrottled = throttle(mouseUp, 300)
// onMounted时添加鼠标移动事件监听器
onMounted(() => {
  document.addEventListener('mouseup', handleMoveThrottled)
})
// 组件卸载时移除监听
onUnmounted(() => {
  document.removeEventListener('mouseup', handleMoveThrottled)
})

// function handleHeightChange(moveHeight) {
//   contentHeight.value = moveHeight - 64
// }

watch(contentHeight, (newValue) => {
  console.log('高度', newValue)
  safeMapStore.setTabTableHeight(newValue)
})

//返回地图poi点展示
const poiShow = computed(() => {
  return safeMapStore.poiTabShow
})

//监听是否展示地图poi
watch(poiShow, (newValue) => {
  if (newValue) {
    switchTab('poi')
    contentHeight.value <= 0 ? toggleTabsTableHeight() : '';
  } else {
    switchTab('times')
    contentHeight.value = 0;
    toggleTabsTableHeight()
    tabActive.value = ''
  }
})

</script>

<style lang="scss" scoped>
.tabs-container {
  position: absolute;
  bottom: 0px;
  width: 100%;
  z-index: 100;
  background-color: #091940;
  color: #ffffff;

  .tabs-header {
    display: flex;
    height: 32px;
    font-size: 12px;
    border-top: 1px solid #4E5A75;
    border-bottom: 1px solid #4E5A75;
    align-items: center;
    justify-content: space-between;

    .tabs-info {
      display: flex;
      align-items: center;
      flex: 1;
      height: 32px;
      // position: relative;

      div {
        margin-left: 20px;

        .status {
          width: 10px;
          height: 10px;
          display: inline-flex;
          margin-right: 5px;

          &.online {
            background: #6FBA2C;
          }

          &.stop {
            background: #F59A23;
          }

          &.offline {
            background: #5975BE;
          }

          &.waring {
            background: #F23333;
          }

          &.outage {
            background: #999999;
          }
        }
      }
    }

    .tabs-option {
      .option-icon {
        margin-right: 10px;
        transition: .3s;
      }

      .icon-down {
        transform: rotate(180deg);
        transition: .3s;
      }
    }
  }

  .tabs-footer {
    background-color: #091940;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-left: 10px;
    height: 32px;
    z-index: 10;
    position: relative;

    .tab-option {
      display: flex;

      .tab {
        padding: 0 10px;
        height: 32px;
        line-height: 32px;
        background-color: #1C2F61;
        color: #ffffff;
        margin-right: 10px;
        transform: skewX(30deg);
        font-size: 12px;

        .font {
          transform: skewX(-30deg);
        }

        &.active {
          background-color: #668FF5;
        }
      }

      .collapse {
        position: absolute;
        width: 18px;
        height: 10px;
        right: 30px;
        top: 19px;
        cursor: pointer;
      }
    }

    .expand-option {
      margin-right: 10px;
      transform: rotate(180deg);
    }
  }

  .tabs-content {
    transition: height 1s ease;
  }

  .col_resize {
    position: absolute;
    width: 100%;
    height: 5px;
    cursor: row-resize;
    z-index: 5;

    &:hover {
      background-color: #efefef;
    }

    &.mousedown {
      position: fixed;
      background-color: #091940;
    }
  }
}
</style>